<template>
  <view class="bac-col-fa bottom-index">
    <!-- 加载中蒙版 -->
    <qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
    <!-- 轮播图区域 -->
    <view class="banner-container">
      <z-swiper ref="zSwiper" v-model="bannerList" :options="options" @slideChange="onSwiperChange">
        <z-swiper-item v-for="(item, index) in bannerList" :key="index" @click="$NavigateTo(item.open_url)">
          <image :src="item.bannerfile" mode="scaleToFill" class="banner-image"/>
          <view class="banner-info">
            <view class="banner-content">
              <text class="banner-title">{{ item.title }}</text>
              <text class="banner-desc">{{ item.description }}</text>
            </view>
            <view class="banner-btn whi-sp flex-shrink-0">立即查看</view>
          </view>
        </z-swiper-item>
      </z-swiper>
      <view class="banner-indicator">
        <view class="indicator-dot" v-for="(item, index) in bannerNum" :key="index"
              :class="{ active: currentSwiper === index }" @click="changeSwiper(index)"></view>
      </view>
    </view>

    <!-- 商品分类 -->
    <view class="category-wrapper">
      <view class="category-scroll-container">
        <scroll-view scroll-x class="category-scroll" ref="categoryScroll" :show-scrollbar="false"
                     @scroll="onCategoryScroll" @scrolltolower="onCategoryScrollToLower"
                     :scroll-into-view="currentCategoryId" scroll-with-animation :scroll-left="categoryScrollLeft">
          <view class="category-container">
            <view class="category-item" v-for="(item, index) in categoryList" :key="index"
                  :id="'category-' + index" @tap="selectCategory(item, index)">
              <image :src="item.icon" mode="aspectFill" class="category-icon"/>
              <text class="category-name">{{ item.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="category-progress-container">
        <view class="category-progress" ref="categoryProgress">
          <view class="category-progress-inner" :style="{ width: categoryScrollWidth + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- 周边好物精选 -->
    <view class="special-container">
      <view class="special-header">
        <view class="special-title-box">
          <image class="title-decoration" mode="aspectFill"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
          <text class="special-title-text">周边好物精选</text>
        </view>
        <view class="special-more box-nw" @click="goToMore('special')">
          <text>更多好物</text>
          <text class="iconfont ic-you fs-34"></text>
        </view>
      </view>
      <view class="special-slider">
        <scroll-view class="special-scroll-wrapper" scroll-x show-scrollbar="false">
          <view class="special-scroll-content">
            <view class="special-item box-nw" v-for="(item, index) in specialList.slice(0,10)" :key="index"
                  @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
              <image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url"
                     mode="aspectFill" class="special-image"/>
              <video v-else :src="item.goods_banner[0].url" mode="aspectFill" class="special-image"
                     enable-play-gesture object-fit="cover" :show-center-play-btn="false" muted loop
                     :controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
                     :show-play-btn="false" :show-loading="false"/>
              <view class="special-info">
                <text class="special-name text-element-1">{{ item.name }}</text>
                <view class="special-price-box">
                  <view class="special-price-wrapper">
                    <text class="special-price">¥{{ item.default_price / 100 }}</text>
                    <text class="special-original-price"
                          v-if="item.original_price">¥{{ item.original_price / 100 }}
                    </text>
                  </view>
                  <view class="cart-icon" @click.stop="addToCollect(item)">
                    <view class="iconfont fs-32 col-f"
                          :class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
                    </view>
                  </view>
                </view>
              </view>
              <view class="special-tag">精选</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 好物臻享-新品专区 -->
    <view class="new-container section-container">
      <view class="section-header">
        <view class="section-title">
          <image class="title-decoration" mode="aspectFill"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
          <text class="title-text">好物臻享</text>
          <text class="subtitle-text">新品专区</text>
        </view>
        <view class="more-link" @click="goToMore('new')">
          <text>更多</text>
          <text class="iconfont ic-you fs-32"></text>
        </view>
      </view>
      <view class="product-grid">
        <view class="product-item" v-for="(item, index) in newProductList.slice(0, 4)" :key="index"
              @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
          <image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url" mode="aspectFill"
                 class="product-image"/>
          <video v-else :src="item.goods_banner[0].url" mode="aspectFill" class="product-image"
                 object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
                 :controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
                 :show-play-btn="false" :show-loading="false"/>
          <view class="product-tag new-tag">新品</view>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <view class="product-price-box">
              <view class="price-wrapper">
                <text class="product-price">¥{{ item.default_price / 100 }}</text>
                <text class="product-original-price"
                      v-if="item.original_price">¥{{ item.original_price / 100 }}
                </text>
              </view>
              <view class="cart-icon" @click.stop="addToCollect(item)">
                <view class="iconfont fs-32 col-f"
                      :class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门周边 -->
    <view class="hot-container section-container">
      <view class="section-header">
        <view class="section-title">
          <image class="title-decoration" mode="aspectFill"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
          <text class="title-text">热门好物</text>
          <text class="subtitle-text">人气爆款</text>
        </view>
        <view class="more-link" @click="goToMore('hot')">
          <text>更多</text>
          <text class="iconfont ic-you fs-32"></text>
        </view>
      </view>
      <view class="product-grid">
        <view class="product-item" v-for="(item, index) in hotList.slice(0, 4)" :key="index"
              @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
          <image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url" mode="aspectFill"
                 class="product-image"/>
          <video v-else :src="item.goods_banner[0].url" mode="aspectFill" class="product-image"
                 object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
                 :controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
                 :show-play-btn="false" :show-loading="false"/>
          <view class="product-tag hot-tag">热门</view>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <view class="product-price-box">
              <view class="price-wrapper">
                <text class="product-price">¥{{ item.default_price / 100 }}</text>
                <text class="product-original-price"
                      v-if="item.original_price">¥{{ item.original_price / 100 }}
                </text>
              </view>
              <view class="cart-icon" @click.stop="addToCollect(item)">
                <view class="iconfont fs-32 col-f"
                      :class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 全部商品（瀑布流） -->
    <view class="all-products-container">
      <view class="all-products-header">
        <view class="section-title">
          <image class="title-decoration" mode="aspectFill"
                 src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
          <text class="title-text">全部商品</text>
        </view>
      </view>

      <view class="waterfall-container">
        <view class="waterfall-column">
          <view class="waterfall-item" v-for="(item, index) in leftColumnProducts" :key="index"
                @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
            <image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url"
                   mode="widthFix" class="waterfall-image"/>
            <video v-else :src="item.goods_banner[0].url" mode="widthFix" class="waterfall-image"
                   object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
                   :controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
                   :show-play-btn="false" :show-loading="false"/>
            <view class="waterfall-info">
              <text class="waterfall-name">{{ item.name }}</text>
              <view class="waterfall-price-box">
                <view class="price-wrapper">
                  <text class="product-price">¥{{ item.default_price / 100 }}</text>
                  <text class="product-original-price"
                        v-if="item.original_price">¥{{ item.original_price / 100 }}
                  </text>
                </view>
                <view class="cart-icon" @click.stop="addToCollect(item)">
                  <view class="iconfont fs-32 col-f"
                        :class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
                  </view>
                </view>
              </view>
              <view class="waterfall-tags" v-if="item.tags && item.tags.length">
                <text class="waterfall-tag" v-for="(tag, tagIndex) in item.tags"
                      :key="tagIndex">{{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <view class="waterfall-column">
          <view class="waterfall-item" v-for="(item, index) in rightColumnProducts" :key="index"
                @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
            <image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url"
                   mode="widthFix" class="waterfall-image"/>
            <video v-else :src="item.goods_banner[0].url" mode="widthFix" class="waterfall-image"
                   object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
                   :controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
                   :show-play-btn="false" :show-loading="false"/>
            <view class="waterfall-info">
              <text class="waterfall-name">{{ item.name }}</text>
              <view class="waterfall-price-box">
                <view class="price-wrapper">
                  <text class="product-price">¥{{ item.default_price / 100 }}</text>
                  <text class="product-original-price"
                        v-if="item.original_price">¥{{ item.original_price / 100 }}
                  </text>
                </view>
                <view class="cart-icon" @click.stop="addToCollect(item)">
                  <view class="iconfont fs-32 col-f"
                        :class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
                  </view>
                </view>
              </view>
              <view class="waterfall-tags" v-if="item.tags && item.tags.length">
                <text class="waterfall-tag" v-for="(tag, tagIndex) in item.tags"
                      :key="tagIndex">{{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <qmy-logo :loading="load"></qmy-logo>
    </view>
  </view>
</template>

<script>
import {
  store
} from '@/utils/store.js'

export default {
  name: 'pageC',
  props: {
    scrollTop: {
      type: Number,
      required: 0
    },
    page: {
      type: Number,
      required: 0
    },
    pageSize: {
      type: Number,
      required: 10
    },
    isVisible: {
      type: Boolean,
      required: false
    },
    refresh: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      dataLoaded: false,
      options: {
        autoplay: {
          disableOnInteraction: false, //用户手动切换后是否停止
        },
        effect: 'panorama',
        loop: true, //无限循环
        slidesPerView: 1.4,
        centeredSlides: true,
        panorama: {
          depth: 0,
          rotate: 45,
          stretch: 1.2
        },
      },
      // 轮播图数据
      bannerList: [],
      bannerNum: [],
      // 分类数据 - 移除重复的实用工具类别
      categoryList: [],
      specialList: [],
      // 新品专区
      newProductList: [],
      // 热门周边
      hotList: [],
      // 全部商品数据
      allProductsList: [],
      // 状态变量
      currentSwiper: 0,

      // 分类滚动相关
      categoryScrollWidth: 0,
      categoryScrollLeft: 0,
      currentCategoryId: '',

      // 商城分页相关
      pageStop: false,
      load: false, // 是否加载中
    }
  },
  computed: {
    userInfo() {
      return store.userInfo;
    },
    // 瀑布流左右两列数据
    leftColumnProducts() {
      return this.allProductsList.filter((_, index) => index % 2 === 0);
    },
    rightColumnProducts() {
      return this.allProductsList.filter((_, index) => index % 2 === 1);
    },
  },
  watch: {
    page(e) {
      if (e != 0) {
        this.getAllGoodsList();
      }
    },

    scrollTop(e) {
    },
    isVisible(val) {
      if (val && !this.dataLoaded) {
        // 使用模拟数据
        this.initMockData();
      }
    },
    refresh(e) {
      if (e) {
        this.dataLoaded = false;
        this.searchText = ''; //清空搜索框内容
        this.allProductsList = [];
        this.pageStop = false; //分页停止
        this.$emit('resetPage', 0) //重置分页页码
        this.$nextTick(() => {
          // 使用模拟数据
          this.initMockData();
        })
      }
    }
  },
  methods: {
    // 初始化模拟数据
    initMockData() {
      // 模拟轮播图数据
      this.bannerList = [
        {
          bannerfile: 'https://picsum.photos/750/550?random=1',
          title: '春季户外装备大促',
          description: '精选户外装备，享受春日阳光',
          open_url: '/pages/detail/goodsDetail?id=1'
        },
        {
          bannerfile: 'https://picsum.photos/750/550?random=2',
          title: '新品首发',
          description: '最新潮流单品，抢先体验',
          open_url: '/pages/detail/goodsDetail?id=2'
        },
        {
          bannerfile: 'https://picsum.photos/750/550?random=3',
          title: '限时特惠',
          description: '超值优惠，不容错过',
          open_url: '/pages/detail/goodsDetail?id=3'
        }
      ];
      this.bannerNum = [...this.bannerList];

      // 模拟商品分类数据
      this.categoryList = [
        {
          _id: 'cat1',
          name: '户外装备',
          icon: 'https://picsum.photos/100/100?random=11'
        },
        {
          _id: 'cat2',
          name: '运动服饰',
          icon: 'https://picsum.photos/100/100?random=12'
        },
        {
          _id: 'cat3',
          name: '数码配件',
          icon: 'https://picsum.photos/100/100?random=13'
        },
        {
          _id: 'cat4',
          name: '生活用品',
          icon: 'https://picsum.photos/100/100?random=14'
        },
        {
          _id: 'cat5',
          name: '美食特产',
          icon: 'https://picsum.photos/100/100?random=15'
        },
        {
          _id: 'cat6',
          name: '文创周边',
          icon: 'https://picsum.photos/100/100?random=16'
        }
      ];

      // 模拟精选商品数据
      this.specialList = [
        {
          _id: 'special1',
          name: '户外防水背包',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/280/260?random=21'
          }],
          default_price: 15900,
          original_price: 19900,
          collect_user_id: []
        },
        {
          _id: 'special2',
          name: '智能运动手环',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/280/260?random=22'
          }],
          default_price: 29900,
          original_price: 39900,
          collect_user_id: []
        },
        {
          _id: 'special3',
          name: '便携式充电宝',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/280/260?random=23'
          }],
          default_price: 8900,
          original_price: 12900,
          collect_user_id: []
        }
      ];

      // 模拟新品数据
      this.newProductList = [
        {
          _id: 'new1',
          name: '新款运动T恤',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=31'
          }],
          default_price: 6900,
          original_price: 8900,
          collect_user_id: []
        },
        {
          _id: 'new2',
          name: '时尚休闲裤',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=32'
          }],
          default_price: 12900,
          original_price: 15900,
          collect_user_id: []
        },
        {
          _id: 'new3',
          name: '防晒帽',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=33'
          }],
          default_price: 3900,
          original_price: 4900,
          collect_user_id: []
        },
        {
          _id: 'new4',
          name: '运动水杯',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=34'
          }],
          default_price: 4900,
          original_price: 6900,
          collect_user_id: []
        }
      ];

      // 模拟热门商品数据
      this.hotList = [
        {
          _id: 'hot1',
          name: '蓝牙耳机',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=41'
          }],
          default_price: 19900,
          original_price: 29900,
          collect_user_id: []
        },
        {
          _id: 'hot2',
          name: '登山鞋',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=42'
          }],
          default_price: 35900,
          original_price: 45900,
          collect_user_id: []
        },
        {
          _id: 'hot3',
          name: '户外帐篷',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=43'
          }],
          default_price: 89900,
          original_price: 119900,
          collect_user_id: []
        },
        {
          _id: 'hot4',
          name: '保温饭盒',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/340/340?random=44'
          }],
          default_price: 7900,
          original_price: 9900,
          collect_user_id: []
        }
      ];

      // 模拟全部商品数据（瀑布流）
      this.allProductsList = [
        {
          _id: 'all1',
          name: '多功能工具刀',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/400?random=51'
          }],
          default_price: 12900,
          original_price: 15900,
          collect_user_id: [],
          tags: ['实用', '户外']
        },
        {
          _id: 'all2',
          name: '便携式折叠椅',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/350?random=52'
          }],
          default_price: 8900,
          original_price: 11900,
          collect_user_id: [],
          tags: ['舒适', '便携']
        },
        {
          _id: 'all3',
          name: '防水手机壳',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/300?random=53'
          }],
          default_price: 3900,
          original_price: 4900,
          collect_user_id: [],
          tags: ['防水', '保护']
        },
        {
          _id: 'all4',
          name: '户外睡袋',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/450?random=54'
          }],
          default_price: 25900,
          original_price: 32900,
          collect_user_id: [],
          tags: ['保暖', '轻便']
        },
        {
          _id: 'all5',
          name: 'LED头灯',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/320?random=55'
          }],
          default_price: 6900,
          original_price: 8900,
          collect_user_id: [],
          tags: ['照明', '节能']
        },
        {
          _id: 'all6',
          name: '户外野餐垫',
          goods_banner: [{
            type: 'image',
            url: 'https://picsum.photos/300/380?random=56'
          }],
          default_price: 4900,
          original_price: 6900,
          collect_user_id: [],
          tags: ['防潮', '易清洁']
        }
      ];

      this.dataLoaded = true;
      this.$emit('refreshState', false);
    },

    //获取轮播图数据
    getBannerData() {
      this.$Route('get-public-data', true).getBanner("周边").then((res) => {
        this.bannerList = res.data;
        // 设置原始banner数量适配指示点
        this.bannerNum = [...res.data]; // 深拷贝，确保不受循环模式影响
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 加载分类数据
    getGoodsCategoryList() {
      this.$Route('get-public-data', true).getGoodsCategoryList().then((res) => {
        this.categoryList = res.data;
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 加载商品数据
    getGoodsList() {
      this.$Route('get-public-data', true).getGoodsList().then((res) => {
        this.specialList = res.data.recommendList;
        this.newProductList = res.data.newList;
        this.hotList = res.data.hotList;
        this.$emit('refreshState', false) //重置刷新状态
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 加载全部商品数据（分页）
    getAllGoodsList() {
      if (this.pageStop) {
        this.$Toast('没有更多商品了');
        return;
      }
      this.load = true;

      // 模拟分页加载更多商品
      setTimeout(() => {
        const moreProducts = [
          {
            _id: 'more1_' + this.page,
            name: '户外水壶',
            goods_banner: [{
              type: 'image',
              url: `https://picsum.photos/300/360?random=${60 + this.page * 2}`
            }],
            default_price: 5900,
            original_price: 7900,
            collect_user_id: [],
            tags: ['便携', '保温']
          },
          {
            _id: 'more2_' + this.page,
            name: '登山杖',
            goods_banner: [{
              type: 'image',
              url: `https://picsum.photos/300/420?random=${61 + this.page * 2}`
            }],
            default_price: 15900,
            original_price: 19900,
            collect_user_id: [],
            tags: ['轻量', '耐用']
          }
        ];

        this.allProductsList = [...this.allProductsList, ...moreProducts];

        // 模拟分页结束
        if (this.page >= 3) {
          this.pageStop = true;
        }

        this.load = false;
      }, 1000);
    },

    // 跳转到更多商品页
    goToMore(type) {
      let title = '';
      switch (type) {
        case 'special':
          title = '周边好物精选';
          break;
        case 'new':
          title = '新品专区';
          break;
        case 'hot':
          title = '热门周边';
          break;
        default:
          title = '商品列表';
      }
      this.$NavigateTo(`/pages/list/goods-list?type=${type}&title=${title}`)
    },
    // 添加到收藏
    addToCollect(data) {
      // 收藏节流
      this.$debounce(() => {
        // 模拟收藏功能，直接更新本地数据
        const userId = this.userInfo?.id || 'mock_user_id';

        // 更新所有列表中的收藏状态
        [this.specialList, this.newProductList, this.hotList, this.allProductsList].forEach(list => {
          list.forEach(item => {
            if (item._id == data._id) {
              const isCollected = item.collect_user_id.includes(userId);
              if (isCollected) {
                // 取消收藏
                item.collect_user_id.splice(item.collect_user_id.indexOf(userId), 1);
                this.$Toast('已取消收藏');
              } else {
                // 添加收藏
                item.collect_user_id.push(userId);
                this.$Toast('收藏成功');
              }
            }
          });
        });
      }, 1000, true, "addToCollect")
    },
    // 轮播图切换事件
    onSwiperChange(swiper, index) {
      // z-swiper在循环模式下实际数据结构为 [最后一项, 原始数据, 第一项]
      // 我们使用realIndex来计算实际索引
      if (this.bannerNum.length > 0) {
        // 全景模式下，swiper会返回实际的索引，不需要再减1
        let realIndex = index;
        // 处理循环边界情况
        if (realIndex >= this.bannerNum.length) {
          realIndex = realIndex % this.bannerNum.length;
        } else if (realIndex < 0) {
          realIndex = (realIndex + this.bannerNum.length) % this.bannerNum.length;
        }
        this.currentSwiper = realIndex;
      }
    },
    // 选择分类
    selectCategory(item, index) {
      this.currentCategoryId = 'category-' + index;
      setTimeout(() => {
        this.$NavigateTo(`/pages/list/goods-list?category_id=${item._id}&title=${item.name}`);
      }, 200);
    },
    // 分类滚动处理
    onCategoryScroll(e) {
      const scrollLeft = e.detail.scrollLeft || 0;
      const windowWidth = uni.getSystemInfoSync().windowWidth;
      const itemWidth = windowWidth * 0.2; // 每个分类项占屏幕宽度的20%
      const totalWidth = this.categoryList.length * itemWidth;
      const scrollViewWidth = windowWidth;
      const maxScroll = Math.max(0, totalWidth - scrollViewWidth);

      // 不需要滚动时不显示进度条
      if (maxScroll <= 0 || this.categoryList.length <= 5) {
        this.categoryScrollWidth = 0;
        return;
      }

      // 计算滚动进度百分比
      if (scrollLeft >= maxScroll - 2) {
        // 已滚动到底部或接近底部
        this.categoryScrollWidth = 100;
      } else if (scrollLeft > 0 && scrollLeft < maxScroll * 0.02) {
        // 刚开始滚动，显示最小进度
        this.categoryScrollWidth = 2;
      } else {
        // 正常计算滚动百分比
        const percentage = (scrollLeft / maxScroll) * 100;
        this.categoryScrollWidth = Math.min(100, Math.max(0, Math.round(percentage)));
      }
    },
    // 分类滚动到底部
    onCategoryScrollToLower() {
      this.categoryScrollWidth = 100;
    },
    // 点击指示点切换轮播图
    changeSwiper(index) {
      if (this.$refs.zSwiper && this.$refs.zSwiper.swiper) {
        // 全景模式下直接滑动到指定索引
        // 因为z-swiper的循环模式会自动处理边界情况
        this.$refs.zSwiper.swiper.slideTo(index);
        this.currentSwiper = index;
      }
    },
  }
}
</script>

<style lang="scss">
.search {
  border-radius: 30px;
  margin: 0 20rpx;
  z-index: 999;
  overflow: hidden;
}

.centered {
  left: 50%;
  transform: translate(-50%, 0%);
}


/* 轮播图 */
.banner-container {
  position: relative;
  padding: 0;
  background-color: #fff;
  width: 100%;
}

.banner-image {
  height: 800rpx;
  width: 100%;
  overflow: hidden;
}

.banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 50%, transparent);
}

.banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 70%;
}

.banner-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 10rpx;
}

.banner-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 10rpx;
}

.banner-btn {
  display: inline-block;
  padding: 12rpx 30rpx;
  background: linear-gradient(to right, #14cc60, #0fb353);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(20, 204, 96, 0.4);
  transition: transform 0.2s;
}

.banner-btn:active {
  transform: scale(0.95);
}

.banner-indicator {
  position: absolute;
  bottom: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 99;
}

.indicator-dot {
  width: 24rpx;
  height: 6rpx;
  background-color: rgba(202, 202, 202, 0.5);
  transition: all 0.3s;
}

.indicator-dot.active {
  background-color: #14cc60;
}

/* 商品分类 */
.category-wrapper {
  padding: 15rpx 0 20rpx;
  background-color: #fff;
  position: relative;
}

.category-scroll-container {
  position: relative;
  overflow: hidden;
}

.category-progress-container {
  display: flex;
  justify-content: center;
  margin-top: 15rpx;
}

.category-progress {
  width: 100rpx;
  height: 4rpx;
  background-color: #f0f0f0;
  border-radius: 2rpx;
  overflow: hidden;
}

.category-progress-inner {
  height: 100%;
  background: linear-gradient(to right, #14cc60, #17D16A);
  border-radius: 2rpx;
  transition: width 0.2s ease-out;
}

.category-scroll {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.category-container {
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  /* 解决inline-block元素间的间隙问题 */
}

.category-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 20vw;
  /* 使用视口宽度的20%，确保每屏正好显示5个 */
  padding: 10rpx 0;
  box-sizing: border-box;
  vertical-align: top;
  font-size: initial;
  /* 恢复正常字体大小 */
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
}

.category-icon:active {
  transform: scale(0.92);
}

.category-name {
  font-size: 26rpx;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 5rpx;
  text-align: center;
}

/* 周边好物精选 */
.special-container {
  padding-top: 30rpx;
  background: #ffffff;
  position: relative;
}


.special-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
}

.special-title-box {
  display: flex;
  align-items: center;
}

.special-title-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 15rpx;
}

.special-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.special-more {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #878787;
  background: #fff;
  padding: 10rpx 20rpx;
  border-radius: 300rpx;
  background: #fff;
}

.special-slider {
  position: relative;
  padding: 0 0 10rpx 0;
}

.special-scroll-wrapper {
  width: 100%;
  position: relative;
  z-index: 1;
  position: relative;
}

.special-scroll-content {
  display: inline-flex;
  padding: 30rpx 0;
  padding-left: 30rpx;
  white-space: nowrap;
}

.special-item {
  position: relative;
  width: 280rpx;
  margin-right: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  display: inline-block;
}

.special-image {
  width: 280rpx;
  height: 260rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.special-tag {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
  padding: 6rpx 14rpx;
  background: linear-gradient(to right, #ff75ac, #f4bdff);
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx #14cc6026;
}

.special-info {
  padding: 16rpx;
}

.special-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.special-price-wrapper {
  display: flex;
  align-items: baseline;
}

.special-price {
  font-size: 30rpx;
  font-weight: bold;
  color: #14cc60;
}

.special-original-price {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.cart-icon {
  background-color: #14cc60;
  border-radius: 50%;
  height: 45rpx;
  width: 45rpx;
  line-height: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 8rpx rgba(20, 204, 96, 0.2);
  transition: transform 0.2s;
}

.cart-icon:active {
  transform: scale(0.9);
}

/* 商品区域通用样式 */
.section-container {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
}

.title-decoration {
  width: 50rpx;
  height: 50rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.subtitle-text {
  font-size: 26rpx;
  color: #999;
  margin-left: 12rpx;
  position: relative;
  top: 2rpx;
}

.more-link {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  background-color: #ffffff;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.product-item {
  position: relative;
  width: calc(50% - 20rpx);
  margin: 10rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.product-item:active {
  transform: scale(0.97);
}

.product-image {
  width: 100%;
  height: 340rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.product-tag {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  padding: 6rpx 14rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.new-tag {
  background: linear-gradient(to right, #14cc60, #77ff66);
  box-shadow: 0 2rpx 6rpx rgba(20, 204, 96, 0.3);
}

.hot-tag {
  background: linear-gradient(to right, #fd5353, #ffda9e);
  box-shadow: 0 2rpx 6rpx rgba(255, 38, 38, 0.3);
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 26rpx;
  color: #000000;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 2.4rem;
}

.product-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.price-wrapper {
  display: flex;
  align-items: baseline;
}

.product-price {
  font-size: 30rpx;
  font-weight: bold;
  color: #14cc60;
}

.product-original-price {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

/* 特定区域样式 */
.new-container {
  margin-top: 20rpx;
  padding: 30rpx 30rpx 20rpx;
}

.hot-container {
  padding: 30rpx 30rpx 20rpx;
}

/* 全部商品（瀑布流） */
.all-products-container {
  margin-top: 20rpx;
  padding: 30rpx 30rpx 50rpx;
  background-color: #fff;
}

.all-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.waterfall-container {
  display: flex;
  justify-content: space-between;
}

.waterfall-column {
  width: 48.5%;
}

.waterfall-item {
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 20rpx;
  transition: transform 0.2s, box-shadow 0.2s;
}

.waterfall-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.waterfall-image {
  width: 100%;
  border-radius: 16rpx 16rpx 0 0;
}

.waterfall-info {
  padding: 16rpx;
}

.waterfall-name {
  font-size: 26rpx;
  color: #000000;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.waterfall-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}

.waterfall-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12rpx;
}

.waterfall-tag {
  font-size: 20rpx;
  color: #14cc60;
  background-color: rgba(20, 204, 96, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
</style>
